<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText">{{$t('product')}}</block>
		</cu-custom>
		<view class='nav-list margin-top'>
			<view class="nav-li text-white" :style="[{backgroundColor:`${item.color}`}]" @tap="gotoDeviceList(item)"
				v-for="(item,index) in productTypeList" :key="index">
				<!-- <view class="nav-title">{{item.num}}</view> -->
				<view class="nav-title cuIcon-more"></view>
				<view class="nav-name">{{item.name}}</view>
				<view class="cu-avatar bg-white margin-right-sm nav-image"
					:style="[{backgroundImage:`url(${item.iconUrl})`}]" style="background-color:rgba(0, 0, 0, 0)">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import themeColors from '@/util/themeColors.js'
	import * as iotProductCompanyApi from '@/api/iot/iotProductCompanyApi.js'
	import *
	as iotProductUserApi from '@/api/iot/iotProductUserApi.js'
	import *
	as iotProductApi from '@/api/iot/iotProductApi.js'
	import * as storage from '@/util/storage.js'
	export default {
		name: 'productList',
		data() {
			return {
				productTypeList: [],
				userId: storage.getUserId(),
				companyId: storage.getCompanyId(),
				websiteModel: storage.getWebsiteModel()
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		created() {
			this.listProductCount()
		},
		methods: {
			gotoDeviceList(item) {
				storage.setProductId(item.productId)
				uni.navigateTo({
					url: `/pages/nav/nav?component=list`
				})
			},
			listProductCount() {
				let api
				switch (this.websiteModel) {
					case 'system':
						api = iotProductApi.listProduct({})
						break
					case 'company':
					case 'dept':
						api = iotProductCompanyApi.listProduct({
							companyId:this.companyId
						})
						break
					default:
						api = iotProductUserApi.listProduct({
							userId: this.userId
						})
				}
				
				api.then((res) => {
					if (res.data) {
						const data = res.data
						const productTypeList = []
						let standardColor = themeColors.standardColor
						let colorArr = []
						for (let color in standardColor) {
							if (color == 'grey') {
								break
							} else {
								colorArr.push(standardColor[color])
							}
						}
						let colorIndex = 0
						let colorLength = colorArr.length
						for (let i = 0; i < data.length; i++) {
							if (colorIndex < colorLength) {
								data[i].color = colorArr[colorIndex]
								colorIndex = colorIndex + 1
							} else {
								data[i].color = colorArr[0]
								colorIndex = 1
							}
							productTypeList.push(data[i])
						}
						this.productTypeList = productTypeList
					}
				})
			},
		}
	}
</script>

<style scoped>
	.nav-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0px 40rpx 0px;
		justify-content: space-between;
	}

	.nav-li {
		padding: 30rpx;
		border-radius: 12rpx;
		width: 45%;
		margin: 0 2.5% 40rpx;
		background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10rpx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}

	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4rpx 4rpx 6rpx rgba(94, 185, 94, 0.4);
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: 300;
	}

	.nav-title::first-letter {
		font-size: 40rpx;
		margin-right: 4rpx;
	}

	.nav-name {
		font-size: 28rpx;
		text-transform: Capitalize;
		margin-top: 20rpx;
		position: relative;
	}

	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40rpx;
		height: 6rpx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100rpx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40rpx;
		opacity: 0.3;
	}

	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36rpx;
		margin-right: 1px;
	}

	.nav-image {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		font-size: 52rpx;
		width: 60rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.text-light {
		font-weight: 300;
	}
</style>
